
<head>
    <title>Example: Simple Package</title>
    <meta charset="utf-8">
    <link href="../base1/cockpit.css" type="text/css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h2>Example: Simple Package</h2>

        <p>This example is an installable cockpit package that runs a simple command
            to ping a remote address.</p>

        <p>Link the package into your home directory:</p>
        <ol>
            <li>Make sure Cockpit works on the local machine.</li>
            <li>Link this directory into your home directory:
<pre>$ mkdir -p ~/.local/share/cockpit
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
$ sudo systemctl restart cockpit</pre>
</li>
            <li>Log into cockpit using your web browser, with the same account as the above.</li>
            <li>Choose this item from the sidebar menu</li>
            <li>Feel free to edit this file and refresh in the browser.</li>
        </ol>
    </div>

    <div class="container-fluid">
        <table class="form-table-ct">
            <tr>
                <td><label class="control-label" for="address">URL</label></td>
                <td><input class="form-control" id="address" value="8.8.8.8"></td>
            </tr>
            <tr>
                <td><button class="btn btn-default btn-primary" id="ping">Ping</button></td>
                <td><button class="btn btn-default btn-danger" disabled id="stop">Stop</button></td>
            </tr>
        </table>
        <p>
            <pre id="output" style="display: none;">
            </pre>
        </p>
        <p id="failure" class="warning" style="display: none"></p>
    </div>

    <script>
        var proc = null;
        $("#ping").on("click", function() {
            var output = $("#output");
            output.text("");
            output.show();

            if (proc)
                proc.close("terminated");
            $("#failure").empty();

            var cmd = [ "ping", $("#address").val() ];
            proc = cockpit.spawn(cmd, { "err": "out" }).
                stream(function(data) {
                    output.append(document.createTextNode(data));
                }).
                fail(function(ex) {
                    $("#failure").show().
                        text(ex.toString());
                });
            $("#stop").prop("disabled", false);
        });
        $("#stop").on("click", function() {
            $(this).prop("disabled", true);
            if (proc)
                proc.close("terminated");
            proc = null;
        });
    </script>
</body>
</html>

